<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<meta name="author" content="Corey Birnbaum" />
	<title>Grid</title>

	<link href="css/normalize.css" rel="stylesheet" type="text/css"/>
	<style>
		body {
			overflow: hidden;
		}
		#view {
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>

<body>

	<div id="view"></div>

	<script type="text/javascript" src="../lib/three.min.js"></script>
	<script type="text/javascript" src="../lib/OrbitControls.js"></script>
	<script type="text/javascript" src="../dist/sqr-grid.min.js"></script>
	<script type="text/javascript">
	window.addEventListener('load', function(evt) {
		var scene = new vg.Scene({
			element: document.getElementById('view'),
			cameraPosition: {x:0, y:150, z:150}
		}, true);

		var grid = new vg.SqrGrid({
			cellSize: 11 // size of individual cells
		});

		grid.generate({
			size: 5 // size of the board
		});

		var mouse = new vg.MouseCaster(scene.container, scene.camera);
		var board = new vg.Board(grid);

		// this will generate extruded square tiles
		board.generateTilemap({
			tileScale: 0.96 // you might have to scale the tile so the extruded geometry fits the cell size perfectly
		});

		scene.add(board.group);
		scene.focusOn(board.group);

		mouse.signal.add(function(evt, tile) {
			if (evt === vg.MouseCaster.CLICK) {
				// we can simply access tile, like this:
				// tile.toggle();
				// or we can use the mouse's raw coordinates to access the cell directly, just for fun:
				var cell = board.grid.pixelToCell(mouse.position);
				var t = board.getTileAtCell(cell);
				if (t) t.toggle();
			}
		}, this);

		update();

		function update() {
			mouse.update();
			scene.render();
			requestAnimationFrame(update);
		}
	});
	</script>
</body>
</html>
